<template>
  <div class="detail">
    <DetailHeader></DetailHeader>
    <DetailBanner :list="detailInfo.gallaryImgs" :title="detailInfo.sightName"></DetailBanner>
    <DetailList :list="detailInfo.categoryList"></DetailList>
  </div>
</template>

<script setup>
import DetailHeader from './components/DetailHeader.vue'
import DetailBanner from './components/DetailBanner.vue'
import DetailList from './components/DetailList.vue'
import axios from 'axios'
import { ref, onMounted } from 'vue'
const detailInfo = ref({})
const getDetailInfo = async () => {
  // detailInfo.value = await axios.get('/public/mock/detail.json').then(res => res.data.data)
  detailInfo.value = await axios.get('/api/detail.json').then(res => res.data.data)
  console.log(detailInfo.value)
}
onMounted(() => {
  getDetailInfo()
})
</script>

<style lang="scss" scoped>
.detail {
  height: 50rem;
}
</style>
